<script setup lang="ts">
import dayjs from 'dayjs'
import type { InfoGridItem } from './ProjectTable.vue'
import { useProjectConfigStore } from '@/store/projectConfig'

const props = defineProps<{
  item: AfterSalesDetail
}>()

defineEmits(['callContact', 'copewith', 'uploadProof'])

const projectConfigStore = useProjectConfigStore()

function getTableInfo(): InfoGridItem[] {
  return [
    { label: '业务员', value: props.item.salesman_name || '未知' },
    { label: '项目总额', value: `¥${props.item.money_total}`, color: '#FF2636' },
    { label: '装修类型', value: props.item.project_type_name || '未知' },
    { label: '工期截止', value: props.item.duration ? dayjs.unix(Number(props.item.duration)).format('YYYY.MM.DD') : '未知' },
    { label: '装修面积', value: props.item.extent?.toString() || '未知' },
    { label: '业主', value: props.item.contacts_name || '未知', showTag: true },
  ]
}

function getStatusTagColor() {
  if (props.item.status?.toString() === '1')
    return '#FF6D0A'
  else if (props.item.status?.toString() === '2')
    return '#617FFF'
  else if (props.item.status?.toString() === '3')
    return '#0FCB71'
  else
    return '#FF6D0A'
}
</script>

<template>
  <view class="flex flex-col bg-white rounded-20rpx">
    <!-- 卡片 Header START -->
    <view class="relative flex flex-col pt-20rpx pr-157rpx pb-20rpx pl-30rpx">
      <view class="text-28rpx leading-48rpx text-secondary">
        {{ item.name ? item.name : '未知项目' }}
      </view>
      <view class="self-start mt-4rpx px-16rpx py-8rpx text-28rpx leading-28rpx text-brand bg-#FFEEE2 rounded-full">
        当前节点：{{ item.node_name || '未开始' }}
      </view>
      <view
        class="absolute top-0 right-0 px-20rpx py-9rpx text-white text-28rpx leading-28rpx bg-brand rounded-tr-20rpx rounded-bl-12rpx"
        :style="{ backgroundColor: getStatusTagColor() }"
      >
        {{ projectConfigStore.afterSalesStatusStr[item.status!] || '未知' }}
      </view>
    </view>
    <!-- 卡片 Header END -->
    <Divider />
    <view class="p-30rpx">
      <ProjectTable :info="getTableInfo()" />
    </view>
    <block v-if="item.status?.toString() !== '3'">
      <Divider />
      <!-- 卡片 Footer START -->
      <view class="flex flex-row-reverse justify-between items-center p-30rpx max-w-690rpx">
        <view class="flex">
          <RGButton size="medium" corner="small" type="secondary" @tap.stop="$emit('callContact')">
            联系业主
          </RGButton>
          <Spacer width="18" />
          <RGButton v-if="item.status?.toString() === '1'" size="medium" corner="small" type="primary" @tap.stop="$emit('copewith')">
            点击处理
          </RGButton>
          <RGButton v-if="item.status?.toString() === '2'" size="medium" corner="small" type="primary" @tap.stop="$emit('uploadProof')">
            上传凭证
          </RGButton>
        </view>
      </view>
    <!-- 卡片 Footer END -->
    </block>
  </view>
</template>
